Nota: Cuando una animación finaliza, el elemento regresa a su estilo original.
Nota: Cuando una animación finaliza, el elemento regresa a su estilo original.
Nota: Cuando una animación termina, el elemento regresa a su estilo original.
La propiedad animation-delay especifica un retraso para el inicio de una animación.
El siguiente ejemplo tiene un retraso de 2 segundos antes de comenzar:
La propiedad animation-iteration-count especifica cuántas veces debe ejecutarse una animación.
En este ejemplo, la animación se ejecutará 3 veces antes de detenerse:
La propiedad animation-iteration-count puede establecerse en infinite para que la animación se repita para siempre:
La propiedad animation-direction especifica si una animación se reproduce hacia adelante, hacia atrás o en ciclos alternos. En este ejemplo, la animación se reproduce en dirección inversa (hacia atrás):
La propiedad animation-timing-function especifica la curva de velocidad de la animación. A continuación se muestran algunos ejemplos:
Permitir que el elemento div conserve los valores de estilo establecidos por el último fotograma clave cuando termina la animación: